<html>
<head>
	<title>Twitch</title>
	<link href="/stylesheets/login.css" type="text/css" rel="stylesheet"/>
	<script type="text/javascript">
	function init() {

		var interface = {};
		interface.showLoginError = function(service){
			document.getElementById('error').innerHTML = service+' login error';
		}
		window.childSandboxBridge = interface;
		
		getUsername();
		getPassword();
		getUsernameIdentica();
		getPasswordIdentica();
	}
	
	function doLogin() {
		
		var username = document.login.username.value;
		var password = document.login.password.value;
		var username_identica = document.login.username_identica.value;
		var password_identica = document.login.password_identica.value;
		
		document.getElementById("error").innerHTML = 'processing...';
		parentSandboxBridge.authenticate(username, password, username_identica, password_identica);

	}

	function getUsername() {
	
		var username = parentSandboxBridge.getUsername();
		if (username != '') { document.getElementById("username").value = username; }
		
	}
	
	function getPassword() {
	
		var password = parentSandboxBridge.getPassword();
		if (password != '') { document.getElementById("password").value = password; }
		
	}
	
	function setUsername() {
	
		var username = document.login.username.value;
		parentSandboxBridge.setUsername(username);
				
	}
	
	function setPassword() {
	
		var password = document.login.password.value;
		parentSandboxBridge.setPassword(password);
				
	}
	
	function getUsernameIdentica() {
	
		var username_identica = parentSandboxBridge.getUsernameIdentica();
		if (username_identica != '') { document.getElementById("username_identica").value = username_identica; }
		
	}
	
	function getPasswordIdentica() {
	
		var password_identica = parentSandboxBridge.getPasswordIdentica();
		if (password_identica != '') { document.getElementById("password_identica").value = password_identica; }
		
	}
	
	function setUsernameIdentica() {
	
		var username_identica = document.login.username_identica.value;
		parentSandboxBridge.setUsernameIdentica(username_identica);
				
	}
	
	function setPasswordIdentica() {
	
		var password_identica = document.login.password_identica.value;
		parentSandboxBridge.setPasswordIdentica(password_identica);
				
	}
	
	function toggleLogin() {
	
		if (document.login.service.value == 'identi.ca') 
		{
			document.getElementById("twitterLogin").style.display = 'none';
			document.getElementById("identicaLogin").style.display = 'block';
		} 
		else 
		{
			document.getElementById("twitterLogin").style.display = 'block';
			document.getElementById("identicaLogin").style.display = 'none';
		}
		
	}

</script>

</head>
<body onLoad="init()">

	<div id="loginContainer">

	<div id="loginCenter">
	<form name="login" action="javascript: doLogin();">
	<div id="twitterLogin">
		<div class="inputbg">
		<div class="hider">
			<input type="text" name="username" id="username" class="removeGlow" onfocus="getUsername();" onblur="setUsername();"/>
		</div>
		</div>

		<div class="inputbg">
		<div class="hider">
			<input type="password" name="password" id="password" class="removeGlow" onfocus="getPassword();" onblur="setPassword();"/>
		</div>
		</div>
	</div>
	<div id="identicaLogin" style="display: none">
		<div class="inputbg">
		<div class="hider">
			<input type="text" name="identica_username" id="username_identica" class="removeGlow" onfocus="getUsernameIdentica();" onblur="setUsernameIdentica();"/>
		</div>
		</div>

		<div class="inputbg">
		<div class="hider">
			<input type="password" name="identica_password" id="password_identica" class="removeGlow" onfocus="getPasswordIdentica();" onblur="setPasswordIdentica();"/>
		</div>
		</div>
	</div>
		<select name="service" onchange="toggleLogin();">
			<option>twitter</option>
			<option>identi.ca</option>
		</select>
		<input type="button" name="submit" id="submit" class="signin" onClick="doLogin()"/>
	</form>
	</div>
	<div id="error"></div>
	</div>

</body>
</html>